var canvas = document.getElementById("myCanvas");
var ctx, w, h, num=5;
var rMax = 10, rMin = 5;
var sMax = 5, sMin = 1;
var balls=[], paths = [];

window.onload=init;
document.addEventListener("keydown", function(event) {
  if (event.keyCode === 27) {
    window.close();
  }
});

function init(){
  // canvas.requestFullScreen();
  w = window.innerWidth;
  h = window.innerHeight;
  canvas.width = w;
  canvas.height = h;

  ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, w, h);

  balls = createBall();

  mainLoop();
}

function getRandomRadius() {
  return Math.floor(Math.random() * rMax) + rMin;
}

function getRandomColor() {
  let r = Math.floor(Math.random() * 256);
  let g = Math.floor(Math.random() * 256);
  let b = Math.floor(Math.random() * 256);
  // let a = Math.floor(Math.random() * 256);
  let color = '#' + r.toString(16) + g.toString(16) + b.toString(16)// + a.toString(16);
  return color;
}

function getRandomAngle() {
  return Math.PI * Math.floor(Math.random() * 360) / 180;
}

function getRandomSpeed() {
  return Math.floor(Math.random() * sMax) + sMin;
}

function createBall() {
  var new_balls = [];
  for(var i=0; i <= num; i++) {
    var angle = getRandomAngle();
    var speed = getRandomSpeed();
    var ball = {
      id: 0,
      x: w/2,
      y: h/2,
      r: getRandomRadius(),
      speedX: speed * Math.cos(angle),
      speedY: speed * Math.sin(angle),
      color: getRandomColor()
    }
    console.log(ball)
    new_balls.push(ball)

    var path = [[ball.x, ball.y], [ball.x, ball.y]];
    paths.push(path);
  }
  return new_balls;
}

function mainLoop() {
  //绘制ball
  drawBalls();

  //更新小球位置
  updateBallsPos();
  
  //再次绘制
  requestAnimationFrame(mainLoop);
}

function drawBalls() {
  balls.forEach(function(b){
    drawCircle(b);
  });
}

function drawCircle(b) {
  ctx.save();
  ctx.fillStyle = b.color;
  ctx.translate(b.x,b.y);
  ctx.beginPath();
  ctx.arc(0, 0, b.r, 0, Math.PI*2);
  ctx.fill();
  ctx.restore();
}

function updateBallsPos() {
  balls.forEach(function(b,idx){
    b.x += b.speedX;
    b.y += b.speedY;
    var isTrun = testCollisionBallWithWall(b);
    
    paths[b.id][1] = [b.x, b.y];
    if (isTrun) {
      paths[b.id][0] = [b.x, b.y];
    }
  })
}

// function testCollisionBallWithWall(b) {
//   var angle;
//   var isTurn = false;
//   if((b.x+b.r) > w) {
//     //小球超出右墙
//     angle = Math.PI*(Math.random()*90 + 135)/180;
//     updateBall(b, angle);
//     b.x = w - b.r; //将小球至于右边缘
//     isTurn = true;
//   }
//   else if((b.x-b.r)<0) {
//     //小球超出左墙
//     angle = Math.PI*(Math.random()*90 - 45)/180;
//     updateBall(b, angle);
//     b.x = b.r;
//     isTurn = true;
//   }

//   if((b.y+b.r)>h) {
//     //小球触及地面
//     angle = Math.PI*(-Math.random()*90 - 45)/180;
//     updateBall(b, angle);
//     b.y = h-b.r;  //将小球放置于地面上
//     isTurn = true;
//   }
//   else if((b.y-b.r)<0){
//     //小球碰到顶部
//     angle = Math.PI*(Math.random()*90 + 45)/180;
//     updateBall(b, angle);
//     b.y = b.r;
//     isTurn = true;
//   }
//   return isTurn
// }

// function updateBall(b, angle) {
//   speed = getRandomSpeed();
//   b.r = getRandomRadius();
//   b.speedX = speed * Math.cos(angle);
//   b.speedY = speed * Math.sin(angle);
//   let a = Math.floor(Math.random() * 256);
//   b.color = b.color.substring(0, 7) + a.toString(16);
// }

function testCollisionBallWithWall(b) {
  var isTurn = false;
  if((b.x+b.r)>w) {
    //小球超出右墙
    b.speedX=-b.speedX;
    b.x=w-b.r; //将小球至于右边缘
    isTurn = true;
  }
  else if((b.x-b.r)<0) { //小球超出左墙
    b.speedX=-b.speedX;
    b.x=b.r;
    isTurn = true;
  }

  if((b.y+b.r)>h) {//小球触及地面
    b.speedY=-b.speedY;
    b.y=h-b.r;  //将小球放置于地面上
    isTurn = true;
  }
  else if((b.y-b.r)<0){ //小球碰到顶部
    b.speedY=-b.speedY;
    b.y=b.r;
    isTurn = true;
  }
  return isTurn
}